<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="isShowDialogComponent"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="form"
        label-width="100px"
        :rules="formRules"
        v-loading="loading"
        element-loading-text="拼命加载中......"
      >
        <div class="flex-box">
          <el-form-item label="员工姓名 :" prop="StaffName">
            <el-input v-model="form.StaffName"></el-input>
          </el-form-item>
          <el-form-item label="电话号码 :" prop="Phone" class="second">
            <el-input v-model="form.Phone"></el-input>
          </el-form-item>
        </div>

        <div class="flex-box">
          <el-form-item label="员工职位 :" prop="Position">
            <el-input v-model="form.Position"></el-input>
          </el-form-item>

          <el-form-item label="员工头像 :" class="second">
            <upload-img
              :width="9"
              :height="16"
              :judge-id="judgeId"
              :image="form.Image"
              @showImage="showImage"
            ></upload-img>
          </el-form-item>
        </div>
        <el-form-item label="员工描述 :">
          <tinymce :default-content="form.PersonalProfile"
                   @change="tinymceChange" class="tinymce"
          ></tinymce>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancelEvent">取 消</el-button>
    <el-button type="primary" @click="submitEvent">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
//导入上传头像组件
import UploadImg from '../../../components/base/uploadPictures/UploadImg'
//导入富文本组件
import Tinymce from '@/components/base/tinymce/index'
//导入网络请求的类
import StaffManage from '@/model/staffManage'
//导入验证规则
import ProofRules from '../../../ck/util/proofRules'

export default {
  name: 'AddAndEditDialog',
  components: {
    UploadImg,
    Tinymce
  },
  props: {
    title: String,
    isShowDialogComponent: Boolean,
    judgeId: Number
  },
  data () {
    return {
      loading: false,
      form: {
        StaffName: '',
        Phone: '',
        Image: '',
        Position: '',
        PersonalProfile: ''
      },
      formRules: {
        Phone: ProofRules.MobileMethod('电话号码'),
        StaffName: ProofRules.requiredFieldAndLength('员工姓名', 2, 10),
        Position: ProofRules.requiredFieldAndLength('员工职位', 2, 10),
      },
    }
  },
  created () {
    this.judgeEditButton()
  },
  methods: {
    handleClose (payload) {
      this.$emit('handleClose', payload)
    },
    //点击取消按钮触发
    cancelEvent () {
      this.$emit('handleClose')
    },
    //点击确定按钮触发
    async submitEvent () {
      await this.$refs.formRef.validate(async valid => {
        if (!valid) {
          this.$message.error('请输入表单必填项')
        } else {
          if (this.form.Image === '') {
            this.$message.error('员工头像为必传项，请上传')
          } else if (!this.form.PersonalProfile) {
            this.$message.error('员工描述为必填项，请填写')
          } else {
            try {
              if (this.judgeId === 0) {
                this.loading = true
                await StaffManage.addStaff(this.form)
                this.loading = false
                this.$message.success('成功添加新员工')
                this.handleClose('submitButton')
              } else {
                this.loading = true
                await StaffManage.editStaffsInfo(this.judgeId, this.form)
                this.loading = false
                this.$message.success('编辑员工信息成功')
                this.handleClose('submitButton')
              }
            } catch (err) {
              this.loading = false
            }
          }
        }
      })
    },
    async judgeEditButton () {
      //说明点击的是编辑按钮，需要给表单赋值
      if (this.judgeId !== 0) {
        this.loading = true
        const res = await StaffManage.showStaffsDetail(this.judgeId)
        console.log(res)
        this.loading = false
        this.form.StaffName = res.StaffName
        this.form.Phone = res.Phone
        this.form.Position = res.Position
        this.form.PersonalProfile = res.PersonalProfile
        this.form.Image = res.Image
      }
    },
    //富文本内容发生变化时触发
    tinymceChange (value) {
      this.form.PersonalProfile = value
    },
    //上传图片组件的事件
    showImage (result) {
      this.form.Image = result
    },

  }
}
</script>

<style scoped>
.tinymce {
  width: 70%;
}

.flex-box {
  display: flex;
}

.flex-box .second {
  margin-left: 100px;
}


</style>
